<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditTime: 2021-07-08 10:46:22
=======
 * @LastEditTime: 2021-07-02 10:46:14
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
 * @LastEditTime: 2021-07-02 10:46:14
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
-->
<template>
  <div>
    <div class="header">
<<<<<<< HEAD
<<<<<<< HEAD
      <div>
        <a href="/#/home">行学天下</a>
        </div>
      <div>
        <img src="../assets/yxtx/phone.png" alt="图片加载失败">
        联系我们
=======
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
      <div>行学天下</div>
      <div>
        <img src="../assets/yxtx/phone.png" alt="图片丢失">
        <span>联系我们</span>
<<<<<<< HEAD
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
      </div>
    </div>
    <div class="content">
      <!-- 轮播图 -->
      <div class="lunbo">
        <el-carousel height="475px">
<<<<<<< HEAD
<<<<<<< HEAD
          <el-carousel-item>
            <img src="../assets/yxtx/images/picture1.jpg" alt="图片丢失" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/yxtx/images/picture2.jpg" alt="图片丢失" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/yxtx/images/picture3.jpg" alt="图片丢失" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="substance">
        <div class="yxcard">
          <div class="yxtitle">精选游学项目</div>
          <div class="projeckCard" v-for="item in projecks" :key="item.id" @click="clickyxcard(item.id)">
            <div class="photo">
              <img :src="item.figure" alt="图片丢失">
            </div>
            <div class="introduce">
                <div class="title">
                  <strong>{{item.name}}</strong>
                </div>
                <div class="time">
                  {{fmtime(item.beginTime)}} ~ {{fmtime(item.endTime)}}
                </div>
                <div class="content">
                  {{item.introduce}}
                </div>
            </div>
          </div>
        </div>
        <div class="xsfc">
          <div class="xsfc_title">学生风采</div>
          <div class = "allarcicles">
            <div class="articleCard" v-for="item in article" :key="item.id" @click="clickxsfc(item.id)">
              <img :src="item.cover" alt="图片丢失">
              <div class="articletitle">{{item.title}}</div>
              <div class="articletime">{{fmtime(item.publishTime)}}</div>
              <div class="article_author">{{item.baseUser.realname}}</div>
            </div>
=======
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
          <el-carousel-item >
            <img src="../assets/yxtx/picture1.jpg" alt="图片丢失">
          </el-carousel-item>
          <el-carousel-item >
            <img src="../assets/yxtx/picture2.jpg" alt="图片丢失">
          </el-carousel-item>
          <el-carousel-item >
            <img src="../assets/yxtx/picture3.jpg" alt="图片丢失">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 游学项目卡片 -->
      <div class="yxcard">
        <div class="projectCard" v-for="item in projects" :key="item.id">
          <div class="photo">
            <img :src="item.figure" alt="图片丢失">
          </div>
          <div class="introduce">
            <div class="pro_title">{{item.name}}</div>
            <div class="pro_time">{{fmtDate(item.beginTime)}} ~ {{fmtDate(item.endTime)}}</div>
            <div class="pro_introduce">{{item.introduce}}</div>
<<<<<<< HEAD
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
<<<<<<< HEAD
<<<<<<< HEAD
    <div></div>
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
  </div>
</template>
<script>
import request from '../utils/request'
<<<<<<< HEAD
<<<<<<< HEAD
import moment from "moment"
export default {
  data(){
    return{
      projecks:[],
      article:[]
    }
  },
  methods:{
    findAllProject(){
      request.get('/index/project/pageQuery?page=1&pageSize=5').then(res => {
        this.projecks = res.data.list;
        console.log(this.projecks)
      })
    },
    findAllArticle(){
      request.get('/index/article/pageQuery?page=1&pageSize=5').then(res=>{
        this.article = res.data.list
      })
    },
    fmtime(date){
      return moment(date).format("YYYY-MM-DD")
    },
    clickyxcard(id){
      this.$router.push({path:'/project',query:{id}})
    },
    clickxsfc(id){
      this.$router.push({path:'/article',query:{id}})
    }
  },
  created(){
    this.findAllProject()
    this.findAllArticle()
=======
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
import moment from 'moment'
export default {
  data() {
    return {
      projects: []
    }
  },
  methods: {
    findAllProject() {
      request.get('/index/project/pageQuery?page=1&pageSize=3').then(res => {
        this.projects = res.data.list
      })
    },
    fmtDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created() {
    this.findAllProject()  // 调用查询游学项目方法
<<<<<<< HEAD
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
  }
}
</script>
<style scoped>
<<<<<<< HEAD
<<<<<<< HEAD
  a{
    text-decoration: none;
    color: black;
  }
  .header{
    height: 100px;
    box-shadow: 0px 0px 5px 1px #333;
    display: flex;
  }
  .header div{
    height: 100px;
    width: 200pd;
    line-height: 100px;
    font-size: 100px;
    text-align: center;
  }
  .header div:first-child{
    font-size: 30px;
    flex:1;
  }
  .header div:last-child{
    font-size:24px;
    padding-right: 20px;
    text-align: right;
    flex:4;
  }
  .header img{
    height: 25px;
    width: 25px;

  }
  .lunbo img{
    height: 475px;
    width: 100%;
  }
  .substance{
    margin: 0px 90px 0px 90px;
  }
  .yxtitle{
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 900;
  }
  .projeckCard{
    margin: 5px;
    height: 200px;
    width: 100%;
    display: flex;
  }
  .projeckCard img{
    height: 168px;
    width: 300px;
  }
  .title{
    height: 30px;
    line-height: 30px;
  }
  .time{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
  }
  .xsfc_title{
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 900;
  }
  .articleCard{
    height: 400px;
    width: 360px;
    margin: 5px 10px;
    display: inline-block;
    vertical-align: text-top;
  }
  .articleCard img{
    height: 200px;
    width: 360px;
    margin: 2px;
  }
  .articletitle{
    font-size: 18px;
    overflow: auto;
  }
  .articletime{
    font-size: 18px;
    height: 30px;
    line-height: 30px;
  }
  .article_author{
    font-size: 18px;
    height: 30px;
    line-height: 30px;
=======
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
  .header {
    height: 100px;
    box-shadow: 0px 0px 5px 1px #999;
    display: flex;
  }
  .header div {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .header div:first-child {
    font-size: 30px;
    flex: 1;
  }
  .header div:last-child {
    font-size: 20px;
    flex: 4;
    text-align: right;
    padding-right: 50px;
  }
  .header div:last-child img {
    width: 50px;
    height: 50px;
    margin-top: 15px;
  }
  .lunbo img {
    width: 100%;
    height: 475px;
  }
  .yxcard {
    padding: 50px 100px;
  }
  .projectCard {
    display: flex;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgb(214, 214, 213);
    margin-bottom: 50px;
  }
  .photo {
    width: 300px;
    height: 200px;
  }
  .photo img {
    width: 300px;
    height: 200px;
  }
  .introduce {
    padding: 10px 20px;
  }
  .pro_title {
    font-size: 18px;
    color: #666;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
  }
  .pro_time {
    height: 20px;
    line-height: 20px;
  }
  .pro_introduce {
    height: 100px;
    padding-top: 30px;
    line-height: 20px;
<<<<<<< HEAD
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
=======
>>>>>>> cb0c2efb683900ed49a96c205c381575bf304d9a
  }
</style>